<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图-定位版本</title>
    <style>
        .wrapper {
            width: 600px;
            height: 400px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }
        .wrapper-box {
            position: relative;
        }
        .img-box {
            position: absolute;
            top: 0;
            left: 0;
            transition: 1s;
        }
        .btns span {
            cursor: pointer;
            user-select: none;
            width: 50px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.2);
            line-height: 100px;
            text-align: center;
            font-size: 50px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            z-index: 10;
            transition: 500ms;
        }
        .btns .pre {
            position: absolute;
            left: 0px;
        }
        .btns .next {
            position: absolute;
            right: 0px;
        }

        .controls {
            position: absolute;
            bottom: 10px;
            list-style: none;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            z-index: 10;
        }
        .controls li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 10px;
            cursor: pointer;
        }
        .controls li.active{
            background-color: #0182fa;
        }

        /* 左右按钮 显示 */
        .wrapper:hover .btns span {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="wrapper-box">
            <!-- <div class="img-box">
                <img src="./img/case20/01.png" alt="">
            </div>
            <div class="img-box">
                <img src="./img/case20/01.png" alt="">
            </div> -->
        </div>
        <div class="btns">
            <span class="pre">&lt;</span>
            <span class="next">&gt;</span>
        </div>
        <ul class="controls">
            <!-- <li class="active"></li>
            <li></li> -->
        </ul>
    </div>
    <script>
        // 轮播图数据
        const arr = [
            "./img/case20/01.png",
            "./img/case20/02.png",
            "./img/case20/03.png",
            "./img/case20/04.png"
        ]

        // 获取要操作的容器
        const wrapper = document.querySelector(".wrapper")
        const wrapperBox = document.querySelector(".wrapper-box")
        const btns = document.querySelectorAll(".btns span")
        const controls = document.querySelector(".controls")

        // 默认渲染图片的下标值
        let curIndex = 0

        // 动态渲染图片
        function renderBanner(){
            wrapperBox.innerHTML = arr.map((item,index)=>{
                return `
                    <div class="img-box" style="z-index: ${index==curIndex?'2':'1'};
                    opacity: ${index==curIndex?'1':'0'}">
                        <img src="${item}" alt="">
                    </div>
                `
            }).join("")
        }
        renderBanner()

        // 动态渲染控制器
        function renderControls(){
            controls.innerHTML = arr.map((item,index)=>{
                return `<li data-index="${index}" class="${curIndex==index?'active':''}"></li>`
            }).join("")
        }
        renderControls()

        // 控制banner显示隐藏
        function showBanner(){
            [...wrapperBox.children].forEach(item=>{
                item.style.opacity = 0
                item.style.zIndex = 1
            })
            wrapperBox.children[curIndex].style.opacity = 1
            wrapperBox.children[curIndex].style.zIndex = 2
        }

        // 点击右按钮
        btns[1].addEventListener("click", function(){
            if(curIndex>=arr.length-1){
                curIndex = 0
            }else{
                curIndex++
            }
            showBanner()
            // renderBanner() --- 没有动画效果
            renderControls()
        })
        // 点击左按钮
        btns[0].addEventListener("click", function(){
            if(curIndex==0){
                curIndex = arr.length -1
            }else{
                curIndex--
            }
            showBanner()
            renderControls()
        });

        // 点击底部控制器圆点
        controls.addEventListener("click", function(e){
            if(e.target.nodeName == "LI"){
                curIndex = e.target.dataset.index
                showBanner()
                renderControls()
            }
        })

        // 自动播放
        let timer = null
        function autoPlay (){
            timer = setInterval(() => {
                btns[1].click()
            }, 2000);
        }
        autoPlay()

        // 鼠标移入暂停播放
        wrapper.addEventListener("mouseenter", function(){
            clearInterval(timer)
        })

        // 鼠标离开继续播放
        wrapper.addEventListener("mouseleave", function(){
            autoPlay()
        })


    </script>
</body>
</html>